<script setup>
import * as echarts from 'echarts/core'
import { ToolboxComponent,TooltipComponent,GridComponent,LegendComponent } from 'echarts/components'
import { LineChart } from 'echarts/charts'
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import { ref,onMounted,onUnmounted } from 'vue'
echarts.use([
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition
]);
const chartRef = ref(null)
const getMap = () => {//获取柱状图
  const myChart = echarts.init(chartRef.value,null,{
    renderer:'canvas',
    useDirtyRect:false
  });
const option = {
  tooltip: {
    trigger: 'axis',
  },
  legend: {
    data: ['Email', 'Union Ads'],
    top: "0%",
      textStyle: {
        color: "rgba(255,255,255,.5)",
        fontSize: "8"
      }
  },
  grid: {
    left: "10",
    top: "30",
    right: "10",
    bottom: "10",
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: [ "01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","26","28","29","30"],
      axisLabel: {
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: 12
          }
        },
      axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,.2)"
          }
        },
    }
  ],
  yAxis: [
    {
      type: 'value',
      axisTick: { show: false },
      axisLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)"
        }
      },
      axisLabel: {
        textStyle: {
          color: "rgba(255,255,255,.6)",
          fontSize: 12
        }
      },
	   //修改分割线的颜色
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)"
        }
      }
    }
  ],
  series: [
    {
      name: 'Email',
      type: 'line',
      smooth:true,
      lineStyle:{
        color:"#0184d5",
        width:"2"
      },
      areaStyle: {
        // 渐变色，只需要复制即可
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(1, 132, 213, 0.4)"   // 渐变色的起始颜色
                },
                {
                  offset: 0.8,
                  color: "rgba(1, 132, 213, 0.1)"   // 渐变线的结束颜色
                }
              ],
              false
            ),
            shadowColor: "rgba(0, 0, 0, 0.1)"
      },
      // 设置拐点 小圆点
      symbol: "circle",
      // 拐点大小
      symbolSize: 8,
      // 设置拐点颜色以及边框
      itemStyle: {
            color: "#0184d5",
            borderColor: "rgba(221, 220, 107, .1)",
            borderWidth: 12
        },
      // 开始不显示拐点， 鼠标经过显示
      showSymbol: false,
      emphasis: {
        focus: 'series'
      },
      data: [ 30, 40, 30, 40,30, 40, 30,60,20, 40, 30, 40, 30, 40,30, 40, 30,60,20, 40, 30, 40, 30, 40,30, 40, 20,60,50, 40],
    },
    {
      name: "Union Ads",
      type: "line",
      smooth: true,
      lineStyle: {
        normal: {
          color: "#00d887",
          width: 2
        }
       },
       areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "rgba(0, 216, 135, 0.4)"
              },
              {
                offset: 0.8,
                color: "rgba(0, 216, 135, 0.1)"
              }
            ],
            false
          ),
          shadowColor: "rgba(0, 0, 0, 0.1)"
        }
      },
      // 设置拐点 小圆点
      symbol: "circle",
      // 拐点大小
      symbolSize: 5,
      // 设置拐点颜色以及边框
       itemStyle: {
          color: "#00d887",
          borderColor: "rgba(221, 220, 107, .1)",
          borderWidth: 12
      },
      // 开始不显示拐点， 鼠标经过显示
      showSymbol: false,
      emphasis: {
        focus: 'series'
      },
      data: [ 130, 10, 20, 40,30, 40, 80,60,20, 40, 90, 40,20, 140,30, 40, 130,20,20, 40, 80, 70, 30, 40,30, 120, 20,99,50, 20],
    },
  ]
};
  myChart.setOption(option);
  window.addEventListener('resize', myChart.resize);
}
onMounted(async()=>{
  await getMap()
})
onUnmounted(() => {
  if (myChart) {
    window.removeEventListener('resize', handleResize); // 移除事件监听
    myChart.dispose(); // 销毁图表实例
    myChart = null; // 释放引用
  }
});

</script>
<template>
<div class="bartu" ref="chartRef">

</div>
</template>
<style scoped lang="less">
.bartu{
  height:240px;
}
</style>